<template>
    <div class="top">
        <ul>
            <li v-for="(item,index) in topArr" v-bind:key="index" v-on:click="changed(index)" v-bind:class = " index===i ?  'active' : '' ">{{ item }}</li>
        </ul>
    </div>
</template>

<script>
import nav from "../mixins/nav"
    export default {
        name: "Top",
        data(){
            return{
               topArr: ["html","css","js","vue","react"],
            }
        },
        mixins: [nav]
    }
</script>

<style scoped>  
    .top ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        height: 50px;
        background-color: rgb(230, 120, 120);
        line-height: 50px;
        color: #fff;
        font-size: 25px;
    }
    .top ul li{
        cursor: pointer;
        list-style: none;
        width: 20%;
        text-align: center;
    }
    .top ul li:hover{ 
        background-color: rgb(186, 182, 182);
        color: #000;
    }
    .active{
        background-color: gainsboro;
        color: #000;
    }
    
</style>